<template>
  <div id="app">
    <h2>{{title}}</h2>
    <hr>
    <h2>添加课程</h2>
    课程名称：<input type="text" v-model="courseInfo.name"><br>
    课程价格：<input type="text" v-model="courseInfo.price"><br>
    <button @click="addList">添加到课程列表</button>
    <div>
    <table>
      <tr>
        <th>课程名称</th>
        <th>课程价格</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item,index) in courseList" :key="item.id">
        <td>{{item.name}}</td>
        <td>{{item.price}}</td>
        <button @click="addShopCar(index)">添加到购物车</button>
      </tr>
      
    </table>
  </div>
    <shop-car :courseItem='courseItem' ></shop-car>
  </div>
 
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

import ShopCar from './components/ShopCar.vue'
export default {
  name: 'app',
  components: {
    // HelloWorld
   
    ShopCar
  },
  data(){
    return {
      title:'练习',
      courseInfo:{
        name:'',
        price:''
      },
      courseItem:{
        name:'',
        price:''
      },
      courseList:[
        {
          id:0,
          name:"web课程",
          price:'1111'
        },
        {
          id:1,
          name:"java课程",
          price:"2222"
        }
      ]
    }
  },
  methods:{
    addList(){
     this.courseList.push(this.courseInfo)
    },
    // addToShopCar(index){
    //   let item = this.courseItem[index];
    //   let isHas = this.courseItem.find(x => x.id==item.id);
    //   if(isHas){
    //     isHas.number+=1;
    //   }else{
    //     // this.courseItem.push({
    //     //   ...item,
    //     //   // number,
    //     //   // isActive:true
    //     // })
    //   }
    // }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
